import React from 'react';
import { Button, Row, Col, Layout, Drawer } from 'antd';
import MoveBox from './MoveBox';

const { Sider, Content } = Layout;

class Login extends React.Component{

    state = {
        visible: true
    }

    showDrawer = () => {
        this.setState({
          visible: true,
        });
    }

    onClose = () => {
        this.setState({
            visible: false,
        });
    }

    componentDidMount() {
        
    }

    render() {
        
        return(
            <Layout style={{height: '100%'}}>
                <Sider style={{background: '#fff',cursor: 'pointer'}}>
                    <Row>
                        <Button style={{width: '100%'}} onClick={() => {this.showDrawer()}}>点击</Button>
                    </Row>
                </Sider>
                <Content style={{overflow: 'hidden'}}>
                    <Col span={24} className="site-drawer-render-in-current-wrapper">
                        <Drawer
                            title=""
                            height={'100%'}
                            placement="bottom"
                            closable={true}
                            onClose={this.onClose}
                            visible={this.state.visible}
                            getContainer={false}
                            bodyStyle={{padding: '12px'}}
                            style={{ position: 'absolute'}}
                        >
                            <Row>
                                <Col span={4}>
                                    <h1 style={{fontSize: '36px',textAlign: 'right'}}>大众宝来</h1>
                                </Col>
                                <Col span={16} style={{padding: '12px'}}>
                                    <div className="carImgBox">
                                        <MoveBox>
                                            <div className="lunGuItems"></div>
                                        </MoveBox>
                                    </div>
                                    <div className="carColor">
                                        <div className="carColorItems" style={{background: 'red'}}></div>
                                        <div className="carColorItems" style={{background: 'blue'}}></div>
                                        <div className="carColorItems" style={{background: 'white'}}></div>
                                    </div>
                                </Col>
                                <Col span={4}>1</Col>
                            </Row>
                            <Row>
                                <Col span={24}>
                                    <div className="lunGuBox">
                                        <div className="lunGuItems"></div>
                                        <div className="lunGuItems"></div>
                                        <div className="lunGuItems"></div>
                                        <div className="lunGuItems"></div>
                                        <div className="lunGuItems"></div>
                                        <div className="lunGuItems"></div>
                                        <div className="lunGuItems"></div>
                                        <div className="lunGuItems"></div>
                                        <div className="lunGuItems"></div>
                                        <div className="lunGuItems"></div>
                                        <div className="lunGuItems"></div>
                                        <div className="lunGuItems"></div>
                                        <div className="lunGuItems"></div>
                                        <div className="lunGuItems"></div>
                                        <div className="lunGuItems"></div>
                                    </div>
                                </Col>
                            </Row>
                        </Drawer>
                    </Col>
                </Content>
            </Layout>
        )
    }
}

export default Login